var GraceJS = require("../../Grace.JS/grace.js");
import { apiServer } from '../../common.js';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        poiTotalList: [], //从后台获取的原始数组
        poiIndex: [0, 0], //选中的店铺序号
        totalPoiArr: [], //获取后台数组里包含id和name的整体数组
        poiTotalArr: [], //整理后，picker读取绑定数据的整体数组
        poiVal: "", //选中的店铺id，用来提交给后台
        cityArr: [], //picker读取的店铺数组里的城市数组（一级选项）
        poiArr: [], //picker读取的店铺数组里的店铺数组（二级选项）
        page:1,
        limit:20,
        list:[],
        loadingType: 1
    },

    getList: function () {
        var that = this;
        wx.showLoading({
            title: 'Loading...',
        })
        GraceJS.get(
            apiServer + 'resume.AiNav/index', {
            page: that.data.page,
            limit: that.data.limit,
            pid: that.data.poiVal
        }, {},
            function (res) {
                if (res.code == 0) {
                    var nowList = GraceJS.arrayConcat(that.data.list, res.data);
                    that.setData({
                        list: nowList,
                        isEmpty: false,
                        page: that.data.page + 1,
                        loadingType: res.data.length < that.data.limit ? 3 : 1,
                    }, function () {
                        if (that.data.list.length == 0) {
                            that.setData({
                                isEmpty: true
                            })
                        }
                        wx.hideLoading();
                    })
                } else {
                    GraceJS.msg(res.message)
                }
            }
        )
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        var that = this;
        //避免多次触发
        if (that.data.loadingType == 3) {
            return;
        }
        that.getList();
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getTreeList()
        this.getList()
    },

    getTreeList: function () {
        var that = this;
        GraceJS.get(
            apiServer + 'resume.AiNav/tree',
            {}, {},
            function (res) {
                if (res.code == 0) {
                    //从后台获取的原始数组
                    let poiTotalList = res.data;
                    //因为数组里没有全国所有门店，手动添加，unshift()添加到数组最前面
                    poiTotalList.unshift({
                        "name": "全部",
                        "id": 0,
                        "multi": [{
                            "name": "所有",
                            "id": 0,
                        }]
                    })
                    //给picker读取的店铺数组里的城市数组（一级选项）赋值
                    let cityArr = poiTotalList.map(item => {
                        return item.name;
                    })
                    // console.log(cityArr, "cityArr")

                    //给包含id和name的二级门店数组赋值
                    //原理：Array.prototype.map() 
                    //map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组，它不会改变原来的数组。
                    let totalPoiArr = poiTotalList.map(item => {
                        return item.multi;//把原始数组里每一项里的multi二级门店数据返回给新数组totalPoiArr
                    })
                    // console.log(totalPoiArr, "totalPoiArr");
                    let poiArr = [];
                    //循环包含id和name的二级门店数组，并返回每一项里的name，把name push进用于picker组件读取的二级数组选项，即poiTotalArr[1]
                    totalPoiArr.forEach(item => {
                        poiArr.push(item.map(i => {
                            return i.name;
                        }));
                    })
                    // console.log(poiArr, "poiArr")

                    //赋值
                    that.setData({
                        poiTotalList: poiTotalList,
                        poiTotalArr: [cityArr, poiArr[0]],//弹出时，默认二级是全国所有门店
                        poiArr: poiArr,
                        cityArr: cityArr,
                        totalPoiArr: totalPoiArr
                    })
                    // console.log("poiTotalArr", that.data.poiTotalArr)
                } else {
                    GraceJS.msg(res.message)
                }
            }
        )
    },

    //某一列的值改变时触发 columnchange 事件
    bindPoiPickerColumnChange(e) {
        var that = this;
        // console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
        let data = {
            poiTotalArr: that.data.poiTotalArr,
            poiIndex: that.data.poiIndex
        }
        data.poiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
            case 0://第一列滚动时，用第一列下标，匹配第二列的值
                for (let i = 0; i < that.data.cityArr.length; i++) {
                    if (data.poiIndex[0] == i) {
                        data.poiTotalArr[1] = that.data.poiArr[i];
                    }
                }
                data.poiIndex[1] = 0;//每次滚动第一列时，默认第二列第一项选中
                break;
        }
        that.setData(data);
    },

    //value 改变时触发 change 事件
    bindPoiPickerChange(e) {
        var that = this;
        let cityIndex = e.detail.value[0];//第一列城市下标
        let poiIndex = e.detail.value[1];//第二列门店下标
        console.log("cityIndex:" + cityIndex, "poiIndex:" + poiIndex)
        //选中的门店是第cityIndex项中的第poiIndex个门店
        let poiVal = that.data.totalPoiArr[cityIndex][poiIndex].id;
        that.setData({
            poiIndex: e.detail.value, //门店下标
            poiVal: poiVal, //门店id
            page:1,
            limit:20,
            list:[],
        }, function(){
            that.getList();
        })
        console.log(that.data.poiVal, "pid");
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        return {
            title: '收录全网最好用的网站',
            path: '/pages/nav-list/index',
        }
    }
})